<template>
	<div class="h-[222px] p-5 bg-bg-1 rounded-lg text-t-1 flex flex-col items-center">
		<div class="inline-block h-5 rounded-lg px-[10px] text-black" :class="_status?.class">
			<BaseText :textT="_status?.textT" />
		</div>
		<base-icon
			:name="icon"
			size="60"
			class="my-[10px] flex-shrink-0"
			:class="['true', '1.1', '5'].includes(String(status)) ? 'text-primary' : ''" />
		<div class="text-lg mb-[10px]">
			<BaseText :text="title" :textT="titleT" />
		</div>
		<div class="text-center text-t-2">
			<slot />
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue'
import { BaseIcon, BaseText } from '@/components/base'
import { SettingsShowEnum, VerifyStatus } from '@/types'

const props = defineProps({
	title: {
		type: [String, Number],
		default: ''
	},
	titleT: {
		type: [String, Array],
		default: ''
	},
	icon: {
		type: String,
		default: ''
	},
	type: {
		type: String as PropType<SettingsShowEnum>
	},
	status: {
		type: [Boolean, Number] as PropType<VerifyStatus | boolean>
	}
})
const _status = computed(() => {
	switch (`${props.type}_${props.status}`) {
		case `${SettingsShowEnum.email}_true`:
		case `${SettingsShowEnum.mobile}_true`:
		case `${SettingsShowEnum.identity}_5`:
			return { textT: 'settings.kyc.Verified', class: 'bg-success' }
		case `${SettingsShowEnum.baseInfo}_false`:
		case `${SettingsShowEnum.identity}_1`:
			return { textT: 'settings.kyc.NotSubmitted', class: 'bg-danger' }
		case `${SettingsShowEnum.baseInfo}_true`:
			return { textT: 'settings.kyc.Submitted', class: 'bg-success' }
		case `${SettingsShowEnum.identity}_2`:
		case `${SettingsShowEnum.identity}_3`:
			return { textT: 'settings.kyc.ApplicationSubmitted', class: 'bg-warning' }
		case `${SettingsShowEnum.identity}_4`:
			return { textT: 'settings.kyc.Failed', class: 'bg-danger' }
		case `${SettingsShowEnum.email}_false`:
		case `${SettingsShowEnum.mobile}_false`:
		default:
			return { textT: 'settings.kyc.Unverified', class: 'bg-danger' }
	}
})
</script>
